<template>
  <div class="recommend">
    <Title title='推荐歌单'></Title>
    <ul class="lists">
      <li class="item" @click="transition(null, true)">
        <img
          src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3443714613,873961460&fm=26&gp=0.jpg"
          alt=""
        />
        <p class="des ofh">每日歌曲推荐</p>
        <div class="play-ico">
          <a-icon type="caret-right" theme="filled" class="ico" />
        </div>
      </li>
      <li
        class="item"
        v-for="item in lists"
        :key="item.id"
        @click="transition(item.id)"
      >
        <img :src="item.picUrl" alt="" />
        <p class="des ofh">{{ item.name }}</p>
        <div class="play-ico">
          <a-icon type="caret-right" theme="filled" class="ico" />
        </div>
        <div class="play-count">
          <a-icon type="caret-right" theme="filled" class="ico" />
          <span class="count">{{resolveCount(item.playCount)}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "@/utils/axios";
import Title from './Title'
export default {
  name: "RecommendSongLists",
  data() {
    return {
      lists: [],
    };
  },
  components: {
    Title
  },
  methods: {
    transition(id, isRecommend) {
      if (isRecommend) {
        this.$router.push("/main/listDetail/null?isRecommend=" + isRecommend);
        return;
      }
      this.$router.push("/main/listDetail/" + id);
    },
    resolveCount(count) {
      if (typeof count === 'number') {
        return count > 10000 ? count.toString().slice(0, 2) + '万' : count 
      }
    }
  },
  created() {
    axios.get("/personalized", { params: { limit: 9 } }).then((res) => {
      const result = res.result;
      if (result.length) {
        this.lists = result;
      }
    });
    axios.get("/recommend/songs").then((res) => {
      console.log(res);
    });
  },
};
</script>

<style lang="scss" scoped>
.recommend {
  margin-top: 3rem;
  .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 0;
    .item {
      position: relative;
      width: 13rem;
      height: 13rem;
      margin: 2rem 0;
      cursor: pointer;
      img {
        width: 13rem;
        height: 13rem;
        border-radius: 1rem;
      }
      .des {
        margin-top: 0.5rem;
        font-weight: bold;
      }
      &:hover {
        .play-ico {
          display: block;
        }
      }
      .play-ico {
        display: none;
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
        text-align: center;
        background: #fff;
        padding-top: 0.3rem;
        padding-left: 0.2rem;
        cursor: pointer;
        border-radius: 50%;
        .ico {
          color: #f40;
          font-size: 1.8rem;
        }
      }
      .play-count {
        position: absolute;
        top: 0;
        right: 0.4rem;
        color: #fff;
      }
    }
  }
}
</style>